import React, {lazy, useEffect, useState} from "react";
import styled from "@emotion/styled";
import {Button, Popconfirm, Space, Spin, Table} from "antd";
import {ArrowRightOutlined, CopyOutlined, DeleteOutlined, EditOutlined, PlusOutlined, ReloadOutlined} from "@ant-design/icons";
import {ColumnsType} from "antd/es/table";
import {httpGet, ResponseData, ResponsePage} from "../../../utils/https";
import {useHistory} from "react-router-dom";
import {GroupCreate} from "./create";
import {addGroupActionCreator} from "../../../redux/customize/action";
import {useDispatch} from "react-redux";

export interface GroupField {
    id: number;
    title: string;
    desc: string;
    up_time: string
}

interface DataParam {
    page: number;
    size: number;
    total: number;
    title: string;
    data: GroupField[]
}


export const CustomizeGroup:React.FC = () => {

    let dispatch = useDispatch();

    let history = useHistory();

    const [spinning, setSpinning] = useState<boolean>(false)

    const [visible, setVisible] = useState<boolean>(false)

    const [params, setParams] = useState<DataParam>({
        page: 1,
        size: 10,
        total: 0,
        title: '',
        data: []
    })

    const enterPage = (data: GroupField) => {
        dispatch(addGroupActionCreator(data))
        history.push('/customize/service')
    }

    const columns: ColumnsType<GroupField> = [
        {
            key: 'title',
            title: '服务名称',
            dataIndex: 'title',
            align: 'center'
        },
        {
            key: 'desc',
            title: '服务描述',
            dataIndex: 'desc',
            align: 'center'
        },
        {
            key: 'up_time',
            title: '更新时间',
            dataIndex: 'up_time',
            align: 'center',
            width: 200
        },
        {
            key: 'action',
            title: '操作',
            align: 'center',
            width: 230,
            render: (recode:GroupField) => (
                <Space>
                    <Button size="middle" type="link" onClick={() => enterPage(recode)} icon={<ArrowRightOutlined />} />
                    <Button size="middle" type="link" onClick={() => enterPage(recode)} icon={<CopyOutlined />} />
                    <Button size="middle" type="link" icon={<EditOutlined />} />
                    <Popconfirm placement="top" title="是否删除当前服务？" okText="删除" cancelText="取消">
                        <Button size="middle" type="link" danger icon={<DeleteOutlined />} />
                    </Popconfirm>

                </Space>
            )
        }
    ]

    const loadData = (page: number, size: number, title?: string) => {
        setSpinning(true)
        httpGet<ResponseData<ResponsePage<GroupField[]>>, any>('/group/pages', {page: page, size: size, title: title}).then(res => {
            setSpinning(false)
            setParams({...params, total: res.data.total, data: res.data.content})
        })
    }

    const refresh = () => {
        const {page, size, title} = params
        loadData(page, size, title)
    }

    const closeModel = () => {
        setVisible(false)
        refresh()
    }


    useEffect(() => {
        loadData(1, 10)
    }, [])

    return <Container>
        <Space style={{marginBottom: 1 + 'rem'}}>
            <Button type={"primary"} icon={<PlusOutlined />} onClick={() => setVisible(true)}>增加</Button>
            <Button type={"primary"} className="button-color-green" icon={<ReloadOutlined />} onClick={() => refresh()}>刷新</Button>
        </Space>
        <Spin tip="加载数据中......" spinning={spinning}>
            <Table bordered columns={columns} dataSource={params.data} pagination={{total: params.total}} />
        </Spin>

        <GroupCreate visible={visible} onCancel={closeModel} />
    </Container>
}

const Container = styled.div`
  margin: 24px;
  .card-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 10vw);
    grid-gap: 10px;
    grid-auto-rows: 20vh;
  }
`